<!DOCTYPE html>
<html class="no-js dark" lang="en">
  <head>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/solarized.css">
    <title>Bootstrap 4 With Solarized</title>
  </head>

  <body id="home">

    <nav class="navbar navbar-expand-md fixed-top bg-s-darker navbar-dark">
      <div class="container">
        <a class="navbar-brand" href="solarized.html">Solarized Theme</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarCollapse" class="navbar-collapse collapse">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#explore-head-section">Explore</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!--<div id="carouselShow" class="carousel slide" data-ride="carousel">-->
      <!--<ol class="carousel-indicators">-->
        <!--<li data-target="#carouselShow" data-slide-to="0" class="active"></li>-->
        <!--<li data-target="#carouselShow" data-slide-to="1"></li>-->
        <!--<li data-target="#carouselShow" data-slide-to="2"></li>-->
      <!--</ol>-->
      <!--<div class="carousel-inner" role="listbox">-->
        <!--<div class="carousel-item active">-->
          <!--<img class="d-block img-fluid" src="./img/tech-1.jpg" alt="First slide">-->
        <!--</div>-->
        <!--<div class="carousel-item">-->
          <!--<img class="d-block img-fluid" src="./img/tech-2.jpeg" alt="Second slide">-->
        <!--</div>-->
        <!--<div class="carousel-item">-->
          <!--<img class="d-block img-fluid" src="./img/tech-3.jpeg" alt="Third slide">-->
        <!--</div>-->
      <!--</div>-->
      <!--<a class="carousel-control-prev" href="#carouselShow" role="button" data-slide="prev">-->
        <!--<span class="carousel-control-prev-icon" aria-hidden="true"></span>-->
        <!--<span class="sr-only">Previous</span>-->
      <!--</a>-->
      <!--<a class="carousel-control-next" href="#carouselShow" role="button" data-slide="next">-->
        <!--<span class="carousel-control-next-icon" aria-hidden="true"></span>-->
        <!--<span class="sr-only">Next</span>-->
      <!--</a>-->
    <!--</div>-->

    <!--welcome section-->
    <section id="welcome-section">
      <div class="overlay">
        <div class="container">
          <div class="row">
            <div class="col">
              <div class="bg-s-darker p-5">
                <h1 class="display-4">Solarized Theme Is Awesome</h1>
                <p class="lead">Elit reiciendis tenetur accusantium quibusdam incidunt sit veritatis? Dolorum totam dolor quam dolorum eaque pariatur?</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--Explore Head Section-->
    <section id="explore-head-section">
      <div class="container">
        <div class="row">
          <div class="col">
            <div class="bg-s-darker p-5 my-5 text-center">
              <h1>Explore Support</h1>
              <p class="my-2 lead">Ipsum nulla distinctio repudiandae maxime quidem! Ullam neque nemo distinctio?</p>
              <button class="btn btn-primary">Explore More</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--Explore Section-->
    <section class="explore-section">
      <div class="container">
        <div class="row text-center">
          <div class="col-md-4">
            <div class="bg-s-darker p-4">
              <img src="./img/atom-png-5.png" alt="" class="mb-3 w-25">
              <h2>Atom</h2>
              <p>Elit quidem numquam architecto reiciendis nulla exercitationem, autem? Enim quas laborum adipisci nostrum provident nostrum Qui perspiciatis numquam minima necessitatibus atque voluptas. Quo aut et molestiae labore vel? Sequi earum quo reprehenderit ipsam illo eos sapiente! Cum sunt voluptate veniam odio officiis perspiciatis Error magni dicta non aperiam voluptates. Rem?</p>
              <button class="btn btn-lg btn-success">learn</button>
            </div>
          </div>
          <div class="col-md-4">
            <div class="bg-s-darker p-4">
              <img src="./img/vim_logo_v.png" alt="" class="mb-3 w-25">
              <h2>Vim</h2>
              <p>Elit quidem numquam architecto reiciendis nulla exercitationem, autem? Enim quas laborum adipisci nostrum provident nostrum Qui perspiciatis numquam minima necessitatibus atque voluptas. Quo aut et molestiae labore vel? Sequi earum quo reprehenderit ipsam illo eos sapiente! Cum sunt voluptate veniam odio officiis perspiciatis Error magni dicta non aperiam voluptates. Rem?</p>
              <button class="btn btn-lg btn-info">learn</button>
            </div>
          </div>
          <div class="col-md-4">
            <div class="bg-s-darker p-4">
              <img src="./img/Vscode.png" alt="" class="mb-3 w-25">
              <h2>VS Code</h2>
              <p>Elit quidem numquam architecto reiciendis nulla exercitationem, autem? Enim quas laborum adipisci nostrum provident nostrum Qui perspiciatis numquam minima necessitatibus atque voluptas. Quo aut et molestiae labore vel? Sequi earum quo reprehenderit ipsam illo eos sapiente! Cum sunt voluptate veniam odio officiis perspiciatis Error magni dicta non aperiam voluptates. Rem?</p>
              <button class="btn btn-lg btn-danger">learn</button>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!--Help Head Section-->
    <section id="help-head-section" class="mt-3 text-center">
      <div class="container">
        <div class="row">
          <div class="col">
            <div class="bg-s-darker p-4">
              <h1>Get Help</h1>
              <p class="lead">Dolor sed quo labore quia lorem Eveniet eum commodi tempora ea officia alias Eos vitae omnis reprehenderit laboriosam dolore? Illum.</p>
              <button class="btn btn-primary">Help</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <hr>
    <!--FOOTER-->
    <footer class="bg-s-darker mt-3">
      <div class="container">
        <div class="row">
          <div class="col text-center p-3">
            <h6>Copyright &copy; 2017</h6>
          </div>
        </div>
      </div>
    </footer>

    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

  </body>

</html>
